<template>
  <div class="account-period-center">
    <!-- 新增背景图模块 -->
    <div class="background-banner">
      <div class="banner-content">
        <h1 class="banner-title">新账期拂去</h1>
        <p class="banner-description">便捷 · 高效 · 一站式</p>
        <div class="banner-button" >
          <el-button
            round
            type="primary"
            @click="handleApply"
            style="background-color: var(--color-base); border-color: var(--color-base)">
            立即申请
          </el-button>
        </div>
      </div>
    </div>
    <div class="account-period-center-content">
      <div class="account-period-center-content-title">
        <h2>全部服务</h2>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <h3>易账期</h3>
            <p class="font-style font-color">为了解决跨境卖家在业务成长期遇到的资金短缺问题，产能平台打造的跨境供应链产品，让广大跨境卖家可以享受到最长90天的账期，助力跨境卖家轻松打造爆款。</p>
            <h4>准入条件</h4>
            <ul class="font-style">
              <li>具有香港公司或海外公司</li>
              <li>店铺MWS授权</li>
              <li>优先考虑使用产能平台推荐的合作物流商或海外仓</li>
            </ul>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <h3>快捷账期</h3>
            <p class="font-style font-color">为解决跨境卖家新品开发过程中遇到的短期资金需求，产能平台打造的便捷供应链产品，跨境卖家可以享受到最长30天免息无抵押的账期服务。</p>
            <h4>准入条件</h4>
            <ul class="font-style">
              <li>亚马逊店铺运营一年以上</li>
              <li>店铺MWS授权</li>
              <li>店铺MWS授权</li>
            </ul>
          </el-card>
        </el-col>
      </el-row>
      <p class="disclaimer">账期额度免责声明：产能平台在本页面提供的账期服务，为贸易相关的常规账期。易芽不通过本服务变相发放贷款，仅通过本页面评估会员资质与其账期额度，并在额度范围内允许会员在采购时享受账期服务。</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AccountPeriodCenter',
  data() {
    return {
      accountPeriods: [
        { id: 1, name: '账期1', status: '已申请' },
        { id: 2, name: '账期2', status: '已申请' },
        { id: 3, name: '账期3', status: '已申请' }
      ]
    };
  },
  methods: {
    handleApply() {
      this.$message({
        message: '立即申请功能待完善',
        type: 'info'
      })
    },
    handleManage() {
      this.$message({
        message: '立即管理功能待完善',
        type: 'info'
      })
    }
  }
};
</script>

<style scoped>
.account-period-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

/* 新增背景图样式 */
.background-banner {
  width: 100%;
  height: 320px;
  background-image: url('./../../assets/pages/bgImg.jpeg'); /* 请替换为实际背景图片URL */
  background-size: cover;
  background-position: center;
  border-radius: 5px;
  color: #fff;
  position: relative;
}

.background-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); 
  border-radius: 5px;
  z-index: 1; 
}

.banner-content {
  text-align: left;
  margin-top: 80px;
  margin-left: 80px;
  position: relative;
  z-index: 2;
}

.banner-title {
  font-size: 44px;
  margin-bottom: 10px;
}

.banner-description {
  font-size: 20px;
  margin-bottom: 20px;
}

.banner-button {
  text-align: right;
  margin-right: 80px;
}

.account-period-center-content {
  width: 100%;
  max-width: 1200px;
  margin-top: 20px;
}

.account-period-center-content-title {
  margin-bottom: 20px;
}

.account-period-center-content-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.account-period-center-content-list-item {
  width: 30%;
  min-width: 300px;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.account-period-center-content-list-item-title {
  text-align: center;
  margin-bottom: 10px;
}

.account-period-center-content-list-item-description {
  text-align: center;
  margin-bottom: 20px;
}
.font-style{
  font-size: 14px;
}
.font-color{
  color: gray;
}
li {
  margin: 8px 0;
  list-style-type: none; /* 删除: list-style-type: disc; */
}
li::marker {
  content: '•  '; /* 修改: 使用实心圆点字符 */
  color: var(--color-base);
  font-size: 16px;
  margin-right: 4px;
}
.disclaimer {
  font-size: 12px;
  color: gray;
  margin-top: 20px;
}
</style>

